<template>
  <div class="setting">
    <x-header title="设置" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="settingList">
    	<div class="aboutUs" @click="goAboutUs">
    		<img src="../../assets/image/aboutUs.png" alt="" />
    		<p>关于我们</p>    		
    		<img class="rightArrow" src="../../assets/image/rightArrow.png" alt="" />
    	</div>
    	<div class="feedback" @click="goFeedback">
    		<img src="../../assets/image/feedback.png" alt="" />
    		<p>意见反馈</p>    	
    		<img class="rightArrow" src="../../assets/image/rightArrow.png" alt="" />
    	</div>
    	<button class="btn" @click="loginOut">退出当前账号</button>
    	<div>
		      <confirm v-model="isShow"	
		      title="提示"
		      @on-cancel="onCancel"
		      @on-confirm="onConfirm"
		      >
		        <p>您确定退出用户账号?</p>
		      </confirm>
	    </div>
    </div>
  </div>
</template>
<script>
/*设置*/
import {XHeader,Alert,Confirm} from 'vux';
import { setCookie, getCookie, clearAllCookie } from '../../util/commonUtils';
export default {
  name:"setting",
  // 数据
  data(){

    return{
    	userId:'',
    	isShow:false,//confirm是否显示
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    	//退出账号
    	loginOut(){     		    		
    		this.isShow = true;    		
    	},
    	//取消
    	onCancel(){
    		this.isShow = false;
    	},
    	//确认退出
    	onConfirm(){
    		//清楚所有储存数据
    		clearAllCookie();
    		sessionStorage.clear();
    		localStorage.clear();
    		this.$router.push('/mine');
    	},
    	//关于我们
    	goAboutUs(){
    		this.$router.push('aboutUs');
    	},
    	//意见反馈
    	goFeedback(){
    		this.$router.push('feedback');
    	},
  },
  // 子组件
  components:{
    XHeader,
    Alert,
    Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.setting{
	min-height:100%;
	background:#f0eff5;
  	.settingList{
		.aboutUs{
			display:flex;			
			height:0.8rem;
			background:#fff;
			margin-top:0.5rem;
			border-top:0.01rem solid #f0eff5;
			position:relative;
			img{
				align-self:center;
				width:0.44rem;
				height:0.44rem;
				margin-left:0.3rem;
			}
			p{
				align-self:center;
				font-size:0.26rem;
				margin-left:0.15rem;
				color:#515151;
			}
			.rightArrow{		
				position:absolute;	
				right:0.6rem;
				top:0.2rem;											
				width:0.15rem;
				height:0.25rem;
			}
		}
		.feedback{
			display:flex;
			height:0.8rem;
			background:#fff;
			border-top:0.01rem solid #f0eff5;
			border-bottom:0.01rem solid #f0eff5;
			position:relative;
			img{
				align-self:center;
				width:0.44rem;
				height:0.44rem;
				margin-left:0.3rem;
			}
			p{
				align-self:center;
				font-size:0.26rem;
				margin-left:0.15rem;
				color:#515151;
			}
			.rightArrow{
				position:absolute;	
				right:0.6rem;
				top:0.2rem;
				width:0.15rem;
				height:0.25rem;
			}
		}
		.btn{
			border:0;
			width:7rem;
			height:0.9rem;
			background:#e52031;
			font-size:0.3rem;
			color:#fff;
			border-radius:0.08rem;
		}
  	}
}
</style>